<template>
	<div class="main real-box">
		<div class="top-panel">
			<div class="search-pane">
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-button type="primary" ghost size="small">查询</a-button>
				</div>
				<div class="search-item-box">
					<a-button type="default" class="reset-btn" size="small">重置</a-button>
				</div>
			</div>
			<div class="btn">
				<a-button type="primary" @click="addMember">添加</a-button>
			</div>
		</div>
		<div class="table-box">
			<div class="table-contain">
				<a-table :columns="columns" :data-source="memberEntities" :rowKey="data => data.id"
				         :loading="loading" :pagination="false" :scroll="{x: 1300}">
					<template slot="bgImg" slot-scope="data">
						<img :src="data.bgImg" style="width: 60px; height: 60px" @click="loadImg(data)"/>
					</template>
					<template slot="createTime" slot-scope="data">
						{{ moment ( data.createTime ).format ( 'YYYY-MM-DD' ) }}
					</template>
					<template slot="isUsed" slot-scope="data">
						<a-tag :color="data.isUsed == 1 ? '#108ee9':'#f50'">{{ data.isUsed == 1 ? '发布' : '结束' }}</a-tag>
					</template>
					<template slot="action" slot-scope="data">
						<a-icon type="stop" class="icon-box" @click.stop="closeMember(data.id)"/>
					</template>
				</a-table>
			</div>
			<div class="page-box">
				<a-pagination
					size="small"
					:showQuickJumper="true"
					:showSizeChanger="true"
					:current="page.current"
					:pageSize="page.pageSize"
					:total="page.total"
					:show-total="(total) => `共${total}条`"
					@showSizeChange="onShowSizeChange"
					@change="changePageSize"
				></a-pagination>
			</div>
		</div>
		<AddMember :title="title" ref="member" @reloadList="queryList"></AddMember>
	</div>
</template>

<script>
import {api, post} from "@/api/api";
import moment from "moment";
import AddMember from "@/view/report/components/AddMember";

export default {
	name: "MemberList",
	components: {AddMember},
	data() {
		return {
			columns: [
				{title: '会员标题', dataIndex: 'memberTitle', key: 'memberTitle',},
				{title: '折扣', dataIndex: 'discount', key: 'discount',},
				{title: '会员内容', scopedSlots: {customRender: 'bgImg'}},
				{title: '交易时间', scopedSlots: {customRender: 'createTime'}},
				{title: '状态', scopedSlots: {customRender: 'isUsed'}},
				{title: '操作', dataIndex: '', key: 'x', scopedSlots: {customRender: 'action'}},
			],
			memberEntities: [],
			page: {
				current: 1,
				pageSize: 20,
				total: 0,
			},
			loading: true,
			moment,
			title: '',
		}
	},
	created() {
		this.queryList ()
	},
	methods: {
		queryList() {
			post ( api.MemberEntities, {page: this.page.current, limit: this.page.pageSize} ).then ( res => {
				this.memberEntities = res.data.data
				this.page.total = res.data.count
				this.loading = false
			} )
		},
		addMember() {
			// 先检查是否还有未关闭的会员记录
			
			this.title = '新增会员记录'
			this.$refs.member.show ()
		},
		loadImg( member ) {
			console.log ( member )
		},
		// 关闭会员记录
		closeMember( id ) {
			this.$confirm({
				title: '提示',
				content: '确定此操作吗？',
				okText: '确认',
				cancelText: '取消',
				type: 'warning',
				showCancel: false,
				onOk() {
					post ( api.UpdateMember, {id: id, isUsed: 0 } ).then ( res => {
						this.queryList()
					} )
				},
				onCancel() {
				}
			})
		},
		onShowSizeChange( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.queryList ()
		},
		changePageSize( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.queryList ()
		},
	}
}
</script>

<style scoped>

</style>
